<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>列表页面</title>
    <link rel="stylesheet" href="../../Public/css/mui.min.css">
    <link rel="stylesheet" href="../../Public/fonts/iconfont.css">
    <link rel="stylesheet" href="../../Public/css/global.css">
    <link rel="stylesheet" href="../css/livestu.css">
</head>
<body>
<div class="scroll-tab scroll-bar">
    <ul class="tab-nav">
        <li class="tn-active">综合</li>
        <li>语文</li>
        <li>数学</li>
        <li>英语</li>
        <li>政治</li>
        <li>历史</li>
        <li>地理</li>
        <li>物理</li>
        <li>化学</li>
        <li>生物</li>
    </ul>
</div>
<div class="mui-content index-content">
    <div class="tab-content tc-active">
        <ul class="mui-table-view hot-cell">
            <li class="mui-table-view-cell mui-media">
                <a href="#">
                    <img class="mui-media-object mui-pull-left lazy" src="http://img0.imgtn.bdimg.com/it/u=2129473072,572477714&fm=200&gp=0.jpg">
                    <div class="mui-media-body">
                        <p class="mui-ellipsis-2 text-14 color-333">
                            匀变速直线运动的速度与时间的关系·基础知识4条
                        </p>
                        <p class="mui-ellipsis text-13 p-t-sm color-666">
                            微课堂
                        </p>
                        <p class="mui-ellipsis p-t-3 text-mini color-999">
                            12.2w次学习
                        </p>
                        <span class="r-pos text-14 color-red">￥28.00</span>
                    </div>
                </a>
            </li>
            <li class="mui-table-view-cell mui-media">
                <a href="#">
                    <img class="mui-media-object mui-pull-left lazy" src="http://img0.imgtn.bdimg.com/it/u=2129473072,572477714&fm=200&gp=0.jpg">
                    <div class="mui-media-body">
                        <p class="mui-ellipsis-2 text-14 color-333">
                            匀变速直线运动的速
                        </p>
                        <p class="mui-ellipsis text-13 p-t-sm color-666">
                            主讲刘老师 | 共7节课
                        </p>
                        <p class="mui-ellipsis p-t-3 text-mini color-999">
                            12.2w次学习
                        </p>
                        <span class="r-pos text-14 color-green">免费</span>
                    </div>
                </a>
            </li>
            <li class="mui-table-view-cell mui-media">
                <a href="#">
                    <img class="mui-media-object mui-pull-left lazy" src="http://img0.imgtn.bdimg.com/it/u=2129473072,572477714&fm=200&gp=0.jpg">
                    <div class="mui-media-body">
                        <p class="mui-ellipsis-2 text-14 color-333">
                            匀变速直线运动的速度与时间的关系·基础知识4条
                        </p>
                        <p class="mui-ellipsis text-13 p-t-sm color-666">
                            主讲刘老师 | 共7节课
                        </p>
                        <p class="mui-ellipsis p-t-3 text-mini color-999">
                            12.2w次学习
                        </p>
                        <span class="r-pos text-14 color-green">免费</span>
                    </div>
                </a>
            </li>
            <li class="mui-table-view-cell mui-media">
                <a href="#">
                    <img class="mui-media-object mui-pull-left lazy" src="http://img0.imgtn.bdimg.com/it/u=2129473072,572477714&fm=200&gp=0.jpg">
                    <div class="mui-media-body">
                        <p class="mui-ellipsis-2 text-14 color-333">
                            匀变速直线运动的速度与时间的关系·基础知识4条
                        </p>
                        <p class="mui-ellipsis text-13 p-t-sm color-666">
                            主讲刘老师 | 共7节课
                        </p>
                        <p class="mui-ellipsis p-t-3 text-mini color-999">
                            12.2w次学习
                        </p>
                        <span class="r-pos text-14 color-green">免费</span>
                    </div>
                </a>
            </li>
        </ul>
        <div class="dropDown text-14 color-999">没有更多数据了</div>
    </div>
    <div class="tab-content">
        <ul class="mui-table-view hot-cell">
            <li class="mui-table-view-cell mui-media">
                <a href="#">
                    <img class="mui-media-object mui-pull-left lazy" src="http://img0.imgtn.bdimg.com/it/u=2129473072,572477714&fm=200&gp=0.jpg">
                    <div class="mui-media-body">
                        <p class="mui-ellipsis-2 text-14 color-333">
                            匀变速直线运动的速度与时间的关系·基础知识4条
                        </p>
                        <p class="mui-ellipsis text-13 p-t-sm color-666">
                            主讲刘老师 | 共7节课
                        </p>
                        <p class="mui-ellipsis p-t-3 text-mini color-999">
                            12.2w次学习
                        </p>
                        <span class="r-pos text-14 color-red">￥28.00</span>
                    </div>
                </a>
            </li>
            <li class="mui-table-view-cell mui-media">
                <a href="#">
                    <img class="mui-media-object mui-pull-left lazy" src="http://img0.imgtn.bdimg.com/it/u=2129473072,572477714&fm=200&gp=0.jpg">
                    <div class="mui-media-body">
                        <p class="mui-ellipsis-2 text-14 color-333">
                            匀变速直线运动的速
                        </p>
                        <p class="mui-ellipsis text-13 p-t-sm color-666">
                            主讲刘老师 | 共7节课
                        </p>
                        <p class="mui-ellipsis p-t-3 text-mini color-999">
                            12.2w次学习
                        </p>
                        <span class="r-pos text-14 color-green">免费</span>
                    </div>
                </a>
            </li>
            <li class="mui-table-view-cell mui-media">
                <a href="#">
                    <img class="mui-media-object mui-pull-left lazy" src="http://img0.imgtn.bdimg.com/it/u=2129473072,572477714&fm=200&gp=0.jpg">
                    <div class="mui-media-body">
                        <p class="mui-ellipsis-2 text-14 color-333">
                            匀变速直线运动的速度与时间的关系·基础知识4条
                        </p>
                        <p class="mui-ellipsis text-13 p-t-sm color-666">
                            主讲刘老师 | 共7节课
                        </p>
                        <p class="mui-ellipsis p-t-3 text-mini color-999">
                            12.2w次学习
                        </p>
                        <span class="r-pos text-14 color-green">免费</span>
                    </div>
                </a>
            </li>
            <li class="mui-table-view-cell mui-media">
                <a href="#">
                    <img class="mui-media-object mui-pull-left lazy" src="http://img0.imgtn.bdimg.com/it/u=2129473072,572477714&fm=200&gp=0.jpg">
                    <div class="mui-media-body">
                        <p class="mui-ellipsis-2 text-14 color-333">
                            匀变速直线运动的速度与时间的关系·基础知识4条
                        </p>
                        <p class="mui-ellipsis text-13 p-t-sm color-666">
                            主讲刘老师 | 共7节课
                        </p>
                        <p class="mui-ellipsis p-t-3 text-mini color-999">
                            12.2w次学习
                        </p>
                        <span class="r-pos text-14 color-green">免费</span>
                    </div>
                </a>
            </li>
        </ul>
        <div class="dropDown text-14 color-999">没有更多数据了</div>
    </div>
    <div class="tab-content">数学</div>
    <div class="tab-content">英语</div>
    <div class="tab-content">政治</div>
    <div class="tab-content">历史</div>
    <div class="tab-content">地理</div>
    <div class="tab-content">物理</div>
    <div class="tab-content">化学</div>
    <div class="tab-content">生物</div>
</div>
</body>
<script src="../../Public/libs/jquery-3.2.1.min.js" charset="utf-8"></script>
<script src="../../Public/libs/mui.min.js" charset="utf-8"></script>
<script type="text/javascript">
    $(function(){
        $('.tab-nav li').on('click',function(){
            var $this = $(this);
            if($this.hasClass('tn-active')){
                return false;
            }else{
                var ind = $this.index();
                var li_width = $this.width();
                var win_width = $(window).width();
                var o_left = $this.offset().left;
                if(o_left < (win_width - li_width)/2){
                    var num = 0 - li_width;
                    $(".tab-nav").scrollLeft(num);
                }else if(o_left > (win_width - li_width)/2){
                    var num = li_width;
                    $(".tab-nav").scrollLeft(num);
                }
                $this.siblings('li').removeClass('tn-active');
                $this.addClass('tn-active');
                $('.tab-content').removeClass('tc-active').eq(ind).addClass('tc-active');
            }
        })
    })
</script>
</html>
